<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
	.active{
		color: red;
	}
</style>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js" type="text/javascript"></script>
<title>自定义事件</title>
</head>
<body>


<ul id="tabs">
    <li data-tab="users">Users</li>
    <li data-tab="groups">Groups</li>
</ul>
<div id="tabsContent">
    <div data-tab="users">part1</div>
    <div data-tab="groups">part2</div>
</div>


<script type="text/javascript">


$.fn.tabs = function(control) {
	var element = $(this);
	var control = $(control);

	element.delegate("li", "click", function() {
		var tabName = $(this).attr("data-tab");
		//点击li的时候触发change.tabs自定义事件 
		element.trigger("change.tabs", tabName);
	});

	//给element绑定一个change.tabs自定义事件
	element.bind("change.tabs", function(e, tabName) {
		element.find("li").removeClass("active");
		element.find(">[data-tab='" + tabName + "']").addClass("active");
	});
	element.bind("change.tabs", function(e, tabName) {
		control.find(">[data-tab]").removeClass("active");
		control.find(">[data-tab='" + tabName + "']").addClass("active");
	});

	// 激活第一个选项卡 
	var firstName = element.find("li:first").attr("data-tab");

	element.trigger("change.tabs", firstName);

	return this;
};


$("ul#tabs").tabs("#tabsContent");



</script> 

</body>
</html>









